<template>
	<view class="">
		<view class="bgf p-r-30 p-b-30" style="display: flex;flex-direction: row-reverse;">
			<view class="filter flex-item-center" @click="openCalendar">
				<view class="flex-item-center" v-if="!time">
					<image src="../../static/guolv.png" mode=""></image>时间筛选
				</view>
				<view class="" v-else>
					{{time}}
				</view>
			</view>
		</view>
		<view class="p-30">
			<global-appoint-item v-for="(item,index) in list" :item="item" :key="index" />
		</view>
		<u-calendar :show="show" allowSameDay mode="range" monthNum="20" :defaultDate="defaultDate"
			min-date="2023-01-01" max-date="2050-01-01" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				show: false,
				time:`${dayjs().format('YYYY-MM-DD')} - ${dayjs().format('YYYY-MM-DD')}`,
				list:[],
				search:{
					begin_time:dayjs().format('YYYY-MM-DD'),
					end_time:dayjs().format('YYYY-MM-DD')
				},
				defaultDate:[dayjs().format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				const {
					data
				} = await this.$api.home.reservation({
					...this.search
				})
				console.log(data)
				this.list = data
			},
			openCalendar() {
				// console
				this.show = true
			},
			confirmCalendar(e) {
				// console.log(e.length-1)
				// console.log(e[e.length-1])
				this.time = `${e[0]} - ${e[e.length-1]}`
				this.search.begin_time = e[0]
				this.search.end_time = e[e.length-1]
				this.defaultDate = [e[0],e[e.length-1]]
				this.show = false
				this.getList()

			},
			closeCalendar() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter {
		border: 2rpx solid #999;
		border-radius: 50rpx;
		padding: 12rpx 20rpx;
		font-size: 22rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
</style>